<template>
  <div class="app-container">
    <el-select class="main-select-tree" ref="selectTree" v-model="value"  style="width: 560px;">
      <el-option v-for="item in formatData(data)" :key="item.value" :label="item.label" :value="item.value" style="display: none;" />
      <el-tree class="main-select-el-tree" ref="selecteltree"
        :data="data"
        :node-key="nodeKye"
        highlight-current
        :props="treeProps"
        @node-click="handleNodeClick"
        :current-node-key="value"
        :expand-on-click-node="defaultExpandAll"
        default-expand-all />
    </el-select>
  </div>
</template>

<script>
  export default {
    name: "TreeSelect",
    dicts: [],
    components: {},
    props:{
      value:{
        type:String,
        default:null
      }
      data:{
        type:Array,
        default:function(){
          return []
        }
      },
      nodeKye:{
        type:String,
        default:"id"
      },
      treeProps:{
        type:Object,
        default:function(){
          return {
            children: 'children',
            label: 'label'
          }
        }
      },
      currentNodeKey:{
        type:String,
        default:null,
      },
      expandOnClickNode:{
        type:Boolean,
        default:true
      },
      defaultExpandAll:{
        type:Boolean,
        default:true
      }
    },
    computed: {
      treeOption: function () {
        let option = []
        return this.getTreeOpt(data)
      }
    }
    data() {
      return {

      };
    },
    methods: {
      getTreeOpt(data){
        let option = []
        data.forEach(item =>{
          option.push({label:item.label,value:item.value})
        })
        return option
      }
    },
    beforeCreate() {

    },
    created() {

    },
    beforeMount() {

    },
    mounted() {

    },
    beforeUpdate() {

    },
    updated() {

    },
    beforeDestroy() {

    },
    destroyed() {

    },

  };
</script>
<style scoped>
  .main-select-el-tree .el-tree-node .is-current > .el-tree-node__content{font-weight: bold; color: #409eff;}
  .main-select-el-tree .el-tree-node.is-current > .el-tree-node__content{font-weight: bold; color: #409eff;}
</style>
